<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>用户</title>
    <link rel="stylesheet" href="/static/frame/layui/css/layui.css">
    <link rel="stylesheet" href="/static/frame/static/css/style.css">
    <link rel="icon" href="/static/frame/static/image/code.png">
</head>
<body class="body">
<!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->

<div class="layui-layout layui-layout-admin"> <!-- 添加skin-1类可手动修改主题为纯白，添加skin-2类可手动修改主题为蓝白 -->
    <!-- header -->
    <div class="layui-header my-header">
        <a href="/">
            <!--<img class="my-header-logo" src="" alt="logo">-->
            <div class="my-header-logo"><dd th:text="${loginUser}"></dd></div>
        </a>


        <!-- 顶部右侧添加选项卡监听 -->
        <ul class="layui-nav my-header-user-nav" lay-filter="side-top-right">
            <a href="/logout" class="layui-btn layui-btn-danger layui-btn-radius" style="margin-top: 10px;" id="exit">退出</a>
        </ul>

    </div>

    <div class="layui-body " style="left: 0px;">
        <div class="layui-container">

            <div class="layui-row">
                <div class="layui-col-xs7">
                    <div id="main" style="width: 600px;height:250px;"></div>
                </div>
                <div class="layui-col-xs4">
                    <table class="layui-table" lay-even="" lay-skin="nob">
                        <colgroup>
                            <col width="150">
                            <col width="200">
                        </colgroup>

                        <tbody>
                        <tr>
                            <td>产品名称</td>
                            <td th:text="${productDo.productName}">xxx</td>
                        </tr>
                        <!--<tr>-->
                            <!--<td>单价</td>-->
                            <!--<td th:text="${productDo.productAmount}">xxx</td>-->
                        <!--</tr>-->
                        <tr>
                            <td>总量</td>
                            <td th:text="${count}">汉族</td>
                        </tr>
   <!--                     <tr>
                            <td>总金额</td>
                            <td th:text="${amount}">拉丁美裔</td>
                        </tr>
                        <tr>
                            <td>当前余额</td>
                            <td th:text="${unCleanAmount}">拉丁美裔</td>
                        </tr>-->

                        </tbody>
                    </table>
                </div>
            </div>
            <div class="layui-row">
                <div class="layui-col-xs12">
                    <div id="dateTable" lay-filter="userList"></div>
                </div>

            </div>
        </div>
    </div>
</div>
<script type="text/javascript" src="/static/frame/layui/layui.js"></script>
<script type="text/javascript" src="/static/frame/static/js/vip_comm.js"></script>


<script type="text/javascript">
    layui.use(['table', 'form', 'layer', 'vip_table'], function () {

// 操作对象
        var form = layui.form
            , table = layui.table
            , layer = layui.layer
            , vipTable = layui.vip_table
            , $ = layui.jquery

        // 表格渲染
        var tableIns = table.render({
            elem: '#dateTable'                  //指定原始表格元素选择器（推荐id选择器）
            , height: 600    //容器高度
            , cols: [
                [                  //标题栏
                    { sort: true, fixed: true, space: true}
                    , {field: 'productName', title: '产品名称', width: 180}
                    , {field: 'settleCount', title: '推广总量', width: 120}
                    // , {field: 'settleAmount', title: '推广总金额', width: 120}
                    , {field: 'orderDate', title: '推广时间', width: 180}

                ]
            ]
            , id: 'dataCheck'
            , url: '/user_page/data'
            , method: 'get'
            , page: true
            , limits: [15, 30, 60, 90, 150, 300]
            , limit: 15
            , loading: true
            , done: function (res, curr, count) {

            }
        });

        // 刷新
        $('#btn-refresh').on('click', function () {
            tableIns.reload();
        });




    })

</script>


<script src="/static/js/echart/echarts.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script type="text/javascript">
    var myChart = echarts.init(document.getElementById('main'));

    option = {
        xAxis: {
            type: 'category',
            data: []
        },
        legend: {
            data:['销量']
        },
        yAxis: {
            type: 'value'
        },
        tooltip: {},
        series: [{
            data: [],
            type: 'line'
        }]
    };


    $.get('/user_page/statistics').done(function (data) {
        myChart.setOption({
            xAxis: {
                data: data.days
            },
            series: [{
                // 根据名字对应到相应的系列
                name: '销量',
                data: data.count
            }]
        });
    })



    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);

</script>



</body>
</html>